<script setup lang="ts">
import MyCard from "../../../components/MyCard.vue";
import {nextTick, onMounted, provide, reactive, ref} from "vue";
import {Question, SearchQuestion, User} from "../../../types/mytypes";
import {UserStore} from "../../../store/store";
import QuestionEditForm from "../../../components/Question/QuestionEditForm.vue";
import QuestionListItem from "../../../components/Question/QuestionListItem.vue";
import {QuestionRequest} from "../../../request/MyRequset";
import SearchQuestionItem from "../../../components/Question/SearchQuestionItem.vue";
import SearchQuestionResultBox from "../../../components/Question/SearchQuestionResultBox.vue";
import QuestionList from "../../../components/Question/QuestionList.vue";
import QuestionShow from "../../../components/Question/QuestionShow.vue";

let dialogAddQuestion = reactive({
  show: false
})

let dialogError = reactive({
  show: false,
  msg: ""
})

let dialogQDetail = reactive({
  show:false
})

const user:User = UserStore.getUser();
let searchQuestion = ref<SearchQuestion>()
let allQuestion = ref<Question[]>([])
let showQuestion = ref<Question[]>([])
let clearInput = ref(false)
let detailQuestion = ref<Question>()
let show = ref(false)
//======================FN======================


onMounted(async ()=>{
  await getAllQuestion();
  showQuestion.value  = allQuestion.value
  show.value = true
})


const searchError = (msg:string)=>{
  dialogError.msg = msg
  dialogError.show = true
}

const getAllQuestion = async ()=>{
  allQuestion.value = (await QuestionRequest.getAllQuestion()).data
}

const addQuestionSuccess = async (msg?: string) => {
  dialogAddQuestion.show = false;
  await getAllQuestion();
  showQuestion.value  = allQuestion.value
}
const addQuestionError = (err: string) => {
  dialogError.msg = err;
  dialogError.show = true;
  console.error(err)
}

const clear = ()=>{
  console.log("clear")
  searchQuestion.value = undefined
}

const showQuestionDetail = (q:Question)=>{
  detailQuestion.value = q
  dialogQDetail.show = true
}
</script>

<template>
  <MyCard style="height: 100%" title="题库" back>
    <div v-if="!show">
      <el-skeleton animated v-for="item in 4"></el-skeleton>
    </div>
    <SearchQuestionItem v-if="show" @suc="args => searchQuestion =args" @err="searchError" :width="30" @clear="clear"></SearchQuestionItem>

    <el-button v-if="show" @click="dialogAddQuestion.show=true">添加题目</el-button>

    <QuestionList :show-mode="true" @show="showQuestionDetail" :show-question="showQuestion" v-if="searchQuestion==undefined && show"></QuestionList>

    <SearchQuestionResultBox v-if="searchQuestion!=undefined && show" :search-question="searchQuestion as SearchQuestion"></SearchQuestionResultBox>

  </MyCard>

  <el-dialog class="public_question_dialog" v-model="dialogAddQuestion.show" title="添加题目">
    <QuestionEditForm @error="addQuestionError" @success="addQuestionSuccess"></QuestionEditForm>
  </el-dialog>

  <el-dialog width="25em" class="public_question_dialog" title="错误" v-model="dialogError.show">
    {{ dialogError.msg }}
  </el-dialog>

  <el-dialog width="40em" class="q_detail" title="题目详情" v-model="dialogQDetail.show">
    <QuestionShow v-if="detailQuestion !=undefined" :question="detailQuestion"></QuestionShow>
  </el-dialog>
</template>

<style scoped lang="scss">
.public_question_dialog {
  height: auto;
  min-height: 10em;
  max-width: 20em;
}

</style>